import { createStackNavigator,createBottomTabNavigator,createDrawerNavigator,SafeAreaView,DrawerItems }  from "react-navigation";
import React from "react";
import { Button,ScrollView } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons"
import HomePageTab from "../pages/HomePage";
import page1 from "../pages/page1";
 import page2 from "../pages/page2";
import page3 from "../pages/page3";
import Page4 from "../pages/page4";
import Page5 from "../pages/page5";
export const DrawerNav = createDrawerNavigator({
    Page4:{
        screen:Page4,
        navigationOptions:{
            drawerLabel:'Page4',
            drawerIcon:({ tintColor } )=>(
                <Ionicons
                name={"drafts"}
                size={24}
                style={{color:tintColor}}
                />
            )
        }
    },
    Page5:{
        screen:Page5,
        navigationOptions:{
            drawerLabel:'Page5',
            drawerIcon:({ tintColor } )=>(
                <Ionicons
                    name={"drafts"}
                    size={24}
                    style={{color:tintColor}}
                />
            )
        }
    },
},{
    initialRouteName:"Page5",
    contentOptions:{
        activeTintColor: '#e89',
    },
    contentComponent:(props)=>(
        <ScrollView style={{ backgroundColor:'#987666',flex:1, }}>
            <SafeAreaView forceInset={{ top:'always',horizontal:'never' }}>
                <DrawerItems {...props}/>
            </SafeAreaView>
        </ScrollView>
    )
});
class TabBarComponent1 extends React.Component{
    constructor(props){
        super(props);
        this.theme = {
            tintColor:props.activeTintColor,
            updateTime:new Date().getTime(),
        }
    }
    render(){
        const { routes,index } = this.props.navigationState;
        const { theme } = routes[index].params;
        if(theme&&theme.updateTime>this.theme.updateTime){
            this.theme = theme;
        }
        return (
            <TabBarBottom
                { ...this.theme }
                activeTintColor={ this.theme.tintColor||this.props.activeTintColor }
            />
        )
    }
}
export const AppcreateBottomTabNavigator =  createBottomTabNavigator(
    {
        Home:{
            screen:page1,
            navigationOptions:{
                tabBarLabel:"首页",
                tabBarIcon:({ tintColor,focused }) => (
                    <Ionicons
                        name={focused?'ios-home':'ios-paper'}
                        size={26}
                        style={{color:tintColor}}
                    />
                )
            }
        },
        Home2:{
            screen:page2,
            navigationOptions:{
                tabBarLabel:"naviga2",
                tabBarIcon:({ tintColor,focused }) => (
                    <Ionicons
                        name={focused?'ios-people':'ios-paper'}
                        size={26}
                        style={{color:tintColor}}
                    />
                )
            }
        },
        Home3:{
            screen:page3,
            navigationOptions:{
                tabBarLabel:"naviga3",
                tabBarIcon:({ tintColor,focused }) => (
                    <Ionicons
                        name={focused?'ios-chatboxes':'ios-outlet'}
                        size={26}
                        style={{color:tintColor}}
                    />
                )
            }
        },
        // Settings: SettingsScreen,
    },
    {
        TabBarComponent:TabBarComponent1,
        tabBarOptions:{
            activeTintColor:'blue',
        }
    }
);

export const AppStackNavigator = createStackNavigator({
    HomePage:{
        screen:HomePageTab,
        navigationOptions:{
            title:"主页面",
        }
    },
    page1:{
        screen: page1,
    },
    page2:{
        screen:page2,
    },
        page3:{
            screen:page3,
            navigationOptions:(props)=>{
                const { navigation } = props;
                const { state,setParams } = navigation;
                const  { params } = state;
                return {
                    title:params.title?params.title:"This is Page3",
                    headerRight:(
                       <Button
                       title = {params.mode==="edit"?'编辑':'保存'}
                       onPress={()=>{
                           setParams({mode:params.mode==='edit'?"":'edit'})
                       }}
                       />
                    )
                }
            }
        },
    TabNavTor:{
        screen:AppcreateBottomTabNavigator,
        navigationOptions:{
            title:"This is AppcreateBottomTabNavigator",
        }
    },
        DrawerNav:{
            screen:DrawerNav,
            navigationOptions:{
                title:"This is DrawerNav",
            }
        }
},
    {
        navigationOptions:{

        }
    });